<template>
  <div>
    <div class="footer hidden-xs" v-if="footerobj.mobile">
      <div class="se-content">
        <p>Copyright©2023 红群壹品（广州）文化传播有限责任公司</p>
        <p>客服邮箱：
          <a href="mailto:cs@smarch.com"><b style="color:#000;font-weight:normal;">{{footerobj.email}}</b></a><br />
            <!-- 公司地址：{{footerobj.address}}<br> -->
        </p>
        <div style="display: flex;align-items: flex-start;justify-content: center;margin-bottom: 10px;">
          <span style="margin-right: 1rem;">
            <img src="../assets/images/ga.png" alt="" style="vertical-align: sub;">
            <a style="color: #333;" href="https://beian.mps.gov.cn/#/query/webSearch?code=44010402003122"  rel="noreferrer" target="_blank">粤公网安备44010402003122</a>
          </span>
          <div style="width:230px;">
            <a target="_blank" href="http://beian.miit.gov.cn" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
              <!-- <img src="../assets/images/wj.png" style="float:left;" /> -->
              <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#000;">
                {{footerobj.copyright}}
              </p>
            </a>
          </div>
        </div>
        <sapn style="cursor: pointer;" @click="pmxk('拍卖许可证',require('../assets/images/pmjy.jpg'))">拍卖许可证</sapn>
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="cursor: pointer;" @click="pmxk('增值电信许可证',require('../assets/images/xkz.jpg'))">增值电信许可证</span>
      </div>
    </div>
    
    <footer class="footerBar visible-xs-block" v-if="footerobj.mobile">
      <div class="copyright">
        <!-- <p class="sjs-icp">
          <a style="color: #999; border: 0px;" hidefocus="" href="javaScript:void(0);" rel="nofollow" target="_blank">
            {{footerobj.address}}
          </a>
        </p> -->
        <p>Copyright©2023 红群壹品（广州）文化传播有限责任公司</p>
        <div>
          <p class="sjs-icp">
            <a style="color: #999; border: 0px;" hidefocus="" href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">{{footerobj.copyright}}</a>
          </p>
          <sapn style="color: #999;" @click="pmxk('拍卖许可证',require('../assets/images/pmjy.jpg'))">拍卖许可证</sapn>
          <span  style="color: #999;">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span style="color: #999;" @click="pmxk('增值电信许可证',require('../assets/images/xkz.jpg'))">增值电信许可证</span>
        </div>
      </div>
    </footer>
    <img :src="dialogImageUrl" alt="" ref="imageCon" v-show="1==2">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      width="30%"
      append-to-body
    >
      <img :src="image" alt="" style="width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
  import NameOrDateTimeWatermarkImage from '@/components/NameOrDateTimeWatermarkImage'
  export default {
    name: '',
    components: {
      NameOrDateTimeWatermarkImage
    },
    props: ["footerobj"],
    data() {
      return {
        image: '',
        title: '',
        dialogVisible: false,
        dialogImageUrl: ''
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      pmxk(e,img) {
        this.dialogVisible = true
        this.title = e
        this.image = img
        // let content = "我就是一个水印";
        //       let height = 80; //两个水印之间的垂直高度
        //       let width = 70; //两个水印之间的水平高度
        //       let fontSize = 14; //水印字体大小
        //       let imageCon = this.$refs.imageCon;//获取图片
        //       let canvas = document.createElement("canvas");//创建canvas容器
        //       canvas.width = imageCon.width;//设置canvas容器宽度
        //       canvas.height = imageCon.height;//设置canvas容器高度
        
        //       let ctx = canvas.getContext("2d");//获取2d画笔
        
        //       //在canvas画布上绘制图片 ctx.drawImage(图片, x位置, y位置,  图像宽度, 图像高度);
        //       ctx.drawImage(imageCon, 0, 0, imageCon.width, imageCon.height);
        
        //       //设置文本画笔样式
        //       ctx.textAlign = 'left';//设置文本对齐方式
        //       ctx.textBaseline = 'top';//设置文本基线
        //       ctx.font = `${fontSize}px Microsoft Yahei`;//设置文本字体属性
        //       ctx.fillStyle = "rgba(255, 255, 255,0.25)"//设置文本字体颜色
        
        //       //在canvas画布上绘制文字 ctx.fillText(文字内容, x位置, y位置, 文本最大宽度)
        //       ctx.rotate(17 * Math.PI / 180)//文本旋转角度设置
        //       let i = 0, j = 0, waterMarkerWidth = content.split("").length * fontSize;
        //       for (i = 0; i < imageCon.width / (waterMarkerWidth); i++) {
        //         for (j = 0; j < imageCon.height / (height - 20); j++) {
        //           if (j == 0) {
        //             ctx.fillText(content, i * (waterMarkerWidth + width), -height, imageCon.width)
        //           }
        //           ctx.fillText(content, i * (waterMarkerWidth + width), j * height, imageCon.width)
        //         }
        //       }
        
        //       // var image = new Image();
        //       // imageCon.setAttribute('crossOrigin', 'anonymous');//跨域
        //       // imageCon.setAttribute('useCORS', true);//跨域
        //       // image.setAttribute('crossOrigin', 'anonymous');//跨域
        //       // image.setAttribute('useCORS', true);//跨域
        //       // image.src = canvas.toDataURL("image/png");
        //       this.image = canvas.toDataURL("image/png");//把canvas转base64输出
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    font-size: 14px;
    color: #333;
    background: #ebe1d5;
    padding: 20px 0;
    text-align: center;
  }

  .footer p {
    line-height: 30px;
  }

  .footer1 {
    font-size: 12px;
    color: #6c6b6b;
    padding: 40px 0;
    text-align: center;
    min-width: 1200px;
  }

  .footer1 p {
    line-height: 30px;
  }

  .se-content{
    font-size: 16px;
  }


  .copyright {
    padding: 10px 0;
    text-align: center;
    background: #ebe1d5;
  }

  .copyright p {
    margin-top: 10px;
    color: #999;
  }

  .copyright .link {
    margin-top: 20px;
  }

  .copyright a {
    height: 16px;
    padding: 0 10px;
    display: inline-block;
    color: #333;
    overflow: hidden;
    line-height: 16px;
    border-right: 1px #999 solid;
  }

  .copyright .no_border {
    border: none;
  }

  .back-to-top {
    position: fixed;
    right: 15px;
    background: rgba(119, 121, 125, 0.7);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: none;
    z-index: 1003;
    bottom: 70px;
  }

  .back-to-top:after {
    position: absolute;
    width: 16px;
    height: 16px;
    content: '';
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -8px;
    -webkit-transform: rotate(45deg);
    border: solid 2px #fff;
    border-bottom: none;
    border-right: none;
  }
</style>
<style>
  @media only screen and (min-width: 100px) and (max-width: 998px) {
    .el-dialog{
      width: 80%!important;
    }
  }
</style>